<template>
  <div style="padding: 10px">
    <d-form
      ref="dFormRef"
      :formConfig="formConfig"
      :formItemConfig="formItemConfig"
      v-model="formData">
      <template #input>
        <d-input v-model="formData.input"></d-input>
      </template>
    </d-form>
    <div style="margin-top: 20px">
      <d-button type="primary" @click="submit">提交</d-button>
      <d-button type="warning" @click="reset">重置</d-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const formData = ref({ input: '' })
  const formConfig = ref({
    class: 'flex',
    disabled: false,
    rules: {
      input: [{ required: true, message: '请输入内容', trigger: 'blur' }]
    }
  })
  // 表单配置
  const formItemConfig = ref([{ slot: 'input', label: '普通输入', prop: 'input' }])

  const dFormRef = ref()
  const submit = async () => {
    await dFormRef.value.validate()
  }
  const reset = () => {
    dFormRef.value.resetFields()
  }
</script>
<style scoped lang="scss"></style>
<style>
  .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .w-full {
    width: 100%;
  }
  .w-33 {
    width: 33%;
  }
</style>
